<template>
    <div class="page ">
        <div class="section">
            <div class="doing">
                <div class="picc shopDetail">
                    <img class="lazy2_1" src="http://guijiwenhua.oss-cn-hangzhou.aliyuncs.com/20190416/ea96e15f34394329aaf81523af766250.jpg">
                </div>
            </div>
            <div class="doinginfo">
                <div class="info">
                    <dl>
                        <dt>活动名称：</dt>
                        <dd>{{actName}}</dd>
                    </dl>
                    <dl>
                        <dt>活动日期：</dt>
                        <dd>{{actDate}}</dd>
                    </dl>
                    <dl>
                        <dt>获奖日期：</dt>
                        <dd>{{gameAward.createDate}}</dd>
                    </dl>
                    <dl>
                        <dt>兑奖过期日期：</dt>
                        <dd>{{gameAward.overDate}}</dd>
                    </dl>
                    <dl>
                        <dt>奖品：</dt>
                        <dd>{{gameAward.prize}}</dd>
                    </dl>
                    <dl>
                        <dt>数量：</dt>
                        <dd>1</dd>
                    </dl>
                    <dl>
                        <dt>领取方式：</dt>
                        <dd v-if="gameAward.issue == 0">线上</dd>
                        <dd v-else>线下</dd>
                    </dl>
                    <dl>
                        <dt>领取状态：</dt>
                        <dd v-if="gameAward.status == 0 && gameAward.name == null">未领取</dd>
                        <dd v-else-if="gameAward.status == 0 && gameAward.name != null">待发货</dd>
                        <dd v-else-if="gameAward.status == 1">已发货</dd>
                        <dd v-else-if="gameAward.status == 2">未支付</dd>
                        <dd v-else-if="gameAward.status == 3">待发货</dd>
                        <dd v-else-if="gameAward.status == 4">已过期</dd>
                    </dl>
                    <dl v-if="gameAward.name != ''">
                        <dt>收货人：</dt>
                        <dd>{{gameAward.name}}</dd>
                    </dl>
                    <dl v-if="gameAward.phone != ''">
                        <dt>手机号码：</dt>
                        <dd>{{gameAward.phone}}</dd>
                    </dl>
                    <dl v-if="gameAward.deliveryAddress != null">
                        <dt>收货地址：</dt>
                        <dd>{{area}}{{gameAward.deliveryAddress}}</dd>
                    </dl>
                    <dl v-if="gameAward.shipmentDate != ''">
                        <dt>发货时间：</dt>
                        <dd>{{gameAward.shipmentDate}}</dd>
                    </dl>
                    <dl v-if="gameAward.logisticsCompany != ''">
                        <dt>物流公司：</dt>
                        <dd>{{gameAward.logisticsCompany}}</dd>
                    </dl>
                    <dl v-if="gameAward.logisticsNum != ''">
                        <dt>物流单号：</dt>
                        <dd>{{gameAward.logisticsNum}}</dd>
                    </dl>
                    <dl v-if="gameAward.seatNum != ''">
                        <dt>座位号：</dt>
                        <dd>{{gameAward.seatNum}}</dd>
                    </dl>
                    <!--<dl v-if="gameAward.orderNum != ''">-->
                        <!--<dt>订单编号：</dt>-->
                        <!--<dd>{{gameAward.orderNum}}</dd>-->
                    <!--</dl>-->
                    <dl v-if="prize > 0">
                        <dt>支付金额：</dt>
                        <dd>{{prize}}元</dd>
                    </dl>

                    <!-- 线上游戏按钮 -->
                    <van-button style="height: 50px;line-height: 48px;" v-if="gameAward.gameType == 0 && gameAward.issue == 0 && gameAward.status != 1 && gameAward.status != 2 &&
                        gameAward.name != ''" round class="button-submit" @click="onlineButtonShow">修改地址</van-button>
                    <van-button style="height: 50px;line-height: 48px;" v-else-if="gameAward.gameType == 0 && gameAward.issue == 0 && gameAward.status != 1 && gameAward.status != 2 &&
                        gameAward.name == ''" round class="button-submit" @click="onlineButtonShow">填写地址</van-button>
                    <van-button style="height: 50px;line-height: 48px;" v-else-if="gameAward.gameType == 0 && gameAward.issue == 0 && gameAward.status == 2"  round class="button-submit"
                                @click="weChatPay">微信支付</van-button>
                    <!-- 线下游戏按钮 -->
                    <van-button style="height: 50px;line-height: 48px;" v-if="gameAward.gameType == 1 && gameAward.issue == 1 && gameAward.status == 0 &&
                        gameAward.seatNum != ''" round class="button-submit" @click="offlineButtonShow">修改信息</van-button>
                    <van-button style="height: 50px;line-height: 48px;" v-else-if="gameAward.gameType == 1 && gameAward.issue == 1 && gameAward.status == 0 &&
                        gameAward.seatNum == ''" round class="button-submit" @click="offlineButtonShow">填写信息</van-button>
                </div>
            </div>
        </div>
        <van-dialog
                v-model="onlineShow"
                show-cancel-button
                title="收货信息"
                :before-close="onlineBeforeClose"
                :lockScroll="false"
        >
            <van-field
                    v-model="gameAward.name"
                    clearable
                    label="姓名"
                    placeholder="请输入您的姓名"
            />
            <van-field
                    v-model="gameAward.phone"
                    clearable
                    label="联系电话"
                    placeholder="请输入您的电话"
            />

            <van-field
                    v-model="area"
                    clearable
                    label="所在地区"
                    placeholder="请选择"
                    :readonly="true"
                    @focus="areaSelect();"
            />

            <van-field
                    v-model="gameAward.deliveryAddress"
                    clearable
                    label="详细地址"
                    placeholder="请输入您的详细地址"
            />
        </van-dialog>

        <van-dialog
                v-model="offlineShow"
                show-cancel-button
                title="现场领奖"
                :before-close="offlineBeforeClose"
        >
            <van-field
                    v-model="gameAward.name"
                    clearable
                    label="姓名"
                    placeholder="请输入您的姓名"
            />
            <van-field
                    v-model="gameAward.phone"
                    clearable
                    label="联系电话"
                    placeholder="请输入您的电话"
            />
            <van-field
                    v-model="gameAward.seatNum"
                    label="座位号"
                    placeholder="请输入您的座位号"
            />
            <!--<van-field-->
                    <!--v-model="gameAward.orderNum"-->
                    <!--label="订单编号"-->
                    <!--placeholder="请输入您的订单编号"-->
            <!--/>-->
        </van-dialog>

        <van-popup v-model="areaShow" position="bottom" :overlay="false">
            <van-area
                    :area-list="areaList"
                    title="请选择"
                    value="440600"
                    @cancel="onCancelArea"
                    @confirm="onConfirmArea"
            />
        </van-popup>
    </div>
</template>

<script>
    import {Toast,Dialog} from 'vant';
    import Cookies from 'js-cookie';
    import city from '@/assets/json/city.js'
    import wx from 'weixin-js-sdk'
    export default {
        name: "Congratulationl",
        data(){
            return{
                onlineShow: false,
                offlineShow: false,
                areaShow:false,
                token:'',
                gameAward:{},
                authentication:'',
                area:'',
                areaList:city,
                prize:-1,
                actDate:'',
                actName:''
            }
        },
        created () {
            this.token = Cookies.get("token")
            this.authentication = this.$route.query.authentication
            this.$api.dial.gameAwardInit({openid:this.token,authentication:this.authentication}).then(res=>{
                if(res.code==0){
                    var data = res.data
                    console.log(data)
                    var success = data.success;
                    if(success) {
                        this.gameAward = data.gameAward
                        if(data.gameAward.type = 2){
                            this.prize = data.prize
                        }
                        this.actName = data.actName
                        this.actDate = data.actDate
                        this.area =this.gameAward.deliveryAddress.split("-")[0]
                        this.gameAward.deliveryAddress =this.gameAward.deliveryAddress.split("-")[1]
                    }else{
                        Toast(data.msg);
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        methods:{
            onlineDataSubmit(){
                if (this.gameAward.name == null || this.gameAward.name == "") {
                    Toast("姓名不能为空");
                    return false;
                }
                if (this.gameAward.phone == null || this.gameAward.phone == "") {
                    Toast("联系电话不能为空");
                    return false;
                }
                var phone_pattern = /^0?(1[0-9])[0-9]{9}$/;
                if (this.gameAward.phone == null || !phone_pattern.test(this.gameAward.phone) || this.gameAward.phone == "") {
                    Toast("请输入正确的手机号码，例如：13500000000");
                    return false;
                }
                if (this.gameAward.deliveryAddress == null || this.gameAward.deliveryAddress == "" ||
                    this.area == null || this.area == "") {
                    Toast("收货地址不能为空");
                    return false;
                }
                var address = this.area + '-' + this.gameAward.deliveryAddress
                this.$api.dial.gameAwardSignOnline({openid:this.token,authentication:this.authentication,
                                              name:this.gameAward.name,phone:this.gameAward.phone,address:address}).then(res=>{
                    if(res.code==0){
                        var data = res.data
                        var success = data.success;
                        if(success) {
                            Toast("录入成功")
                            this.$router.push('/order')
                        }else{
                            Toast(data.msg)
                        }
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            offlineDataSubmit(){
                if (this.gameAward.name == null || this.gameAward.name == "") {
                    Toast("姓名不能为空");
                    return false;
                }
                if (this.gameAward.phone == null || this.gameAward.phone == "") {
                    Toast("联系电话不能为空");
                    return false;
                }
                var phone_pattern = /^0?(1[0-9])[0-9]{9}$/;
                if (this.gameAward.phone == null || !phone_pattern.test(this.gameAward.phone) || this.gameAward.phone == "") {
                    Toast("请输入正确的手机号码，例如：13500000000");
                    return false;
                }
                if (this.gameAward.seatNum == null || this.gameAward.seatNum == "") {
                    Toast("座位号不能为空");
                    return false;
                }
                // if (this.gameAward.orderNum == null || this.gameAward.orderNum == "") {
                //     Toast("订单编号不能为空");
                //     return false;
                // }
                this.$api.dial.gameAwardSignOffline({openid:this.token,authentication:this.authentication,
                    name:this.gameAward.name,phone:this.gameAward.phone,seatNum:this.gameAward.seatNum}).then(res=>{
                    if(res.code==0){
                        var data = res.data
                        var success = data.success;
                        if(success) {
                            Dialog.alert({
                                title: '提示',
                                message: '录入成功'
                            }).then(() => {
                                this.$router.push('/order')
                            });
                        }else{
                            Toast(data.msg);
                        }
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            /*弹窗方法*/
            onlineButtonShow(){
                this.onlineShow = !this.onlineShow
            },
            offlineButtonShow(){
                this.offlineShow = !this.offlineShow
            },
            // onConfirmDialog() {
            //     this.dataSubmit()
            //     //this.show = !this.show
            // },
            // onCancelDialog() {
            //     this.show = !this.show
            // },
            onlineBeforeClose(action, done) {
                if (action === 'confirm') {
                    if(!this.onlineDataSubmit()){
                        done(false)
                    }
                } else {
                    done();
                }
            },
            offlineBeforeClose(action, done) {
                if (action === 'confirm') {
                    if(!this.offlineDataSubmit()){
                        done(false)
                    }
                } else {
                    done();
                }
            },
            /*区域方法*/
            areaSelect(){
                this.areaShow = !this.areaShow
            },
            onConfirmArea(value) {
                this.area = value[0].name + value[1].name + value[2].name
                this.areaShow = !this.areaShow
            },
            onCancelArea() {
                this.areaShow = !this.areaShow
            },
            weChatPay() {
                this.$api.dial.gameAwardWXPay({
                        userId:this.gameAward.userId,
                        openId:this.token,
                        tradeType:1,
                        objectId:this.gameAward.authentication,
                        payApp:'wxmp'}).then(res=>{
                    if(res.code==0){
                        var payinfo = res.payinfo
                        var appId = payinfo.appId
                        var timeStamp = payinfo.timeStamp
                        var nonceStr = payinfo.nonceStr
                        var packageValue = payinfo.packageValue
                        var signType = payinfo.signType
                        var paySign = payinfo.paySign
                        wx.chooseWXPay({
                            timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
                            package: packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                            signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: paySign, // 支付签名
                            success: function (res) {
                                var data = res.data
                                Dialog.alert({
                                    title: '提示',
                                    message: '支付成功'
                                }).then(() => {
                                    window.location.reload()
                                });
                            }
                        });

                    }else{
                        Toast(res.msg);
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }
        }
    }
</script>

<style lang="less">
    @import "../../assets/less/base";
    .van-button--large {
        width: 100% !important;
        height: 50px !important;
        line-height: 48px !important;
    }
    .page {
        max-width: 640px;
        background: #f1f5f8;
        position: relative;
        min-height: 100%;
        min-width: 320px;
        margin: 0 auto;
        font-size: 12px;
    }
    .section {
        padding: 3% 3% 0 3%;
    }
    .doing {
        position: relative;
    }
    .doing .picc img {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .doing img {
        width: 100%;
    }
    .doinginfo {
        background: #fff;
        border: 1px solid #e0e8f3;
        border-top: 0;
        padding: 3%;
        position: relative;
    }
    .doinginfo .h3 {
        font-size: 1.0rem;
        color: #627e94;
        font-weight: normal;
        line-height: 22px;
    }
    .doinginfo .info {
        padding-top: 3%;
    }
    .doinginfo .info dl {
        padding: 15px 0;
        font-size: 3.73vw;
        overflow: hidden;
        margin: 0;
    }
    .doinginfo .info dt {
        color: #627e94;
        background: url(/images/weixin2/hbg1.png) no-repeat;
        background-size: contain;
        padding-left: 4vw;
        float: left;
        width: 18.94vw;
    }
    .doinginfo .info dd {
        color: #91a7b5;
        line-height: 20px;
        padding-left: 4vw;
        float: left;
        word-break: break-all;
        width: 59.88vw;
        margin: 0;
    }
    .doinginfo .info dd a {
        color: #91a7b5;
    }
    .button-submit {
        background-color: @main-theme-color;
        color: #FFFFFF;
        width: 100%;
        height: 50px;
        line-height: 48px;
    }
    /*.van-dialog {*/
        /*position: absolute;*/
    /*}*/
    /*.van-popup {*/
        /*position: absolute;*/
    /*}*/
</style>
